<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="utf-8">
    <title>数据库表-代码生成</title>
    <link rel="stylesheet" href="/components/treetable-lay/assets/layui/css/layui.css">
    <link rel="stylesheet" href="/components/treetable-lay/assets/common.css"/>
    <script src='/components/treetable-lay/assets/layui/layui.js'></script>
    <script src='/base/js/jquery-3.4.1.min.js'></script>
    <script src="/modules/js/app.js"></script>
</head>
<body>


<!-- 左边树 -->
<div style="display: inline-block;float:left; width: 20%; height: 800px; padding: 10px; border: 1px solid #ddd; overflow: auto;margin-top: 3%">
    <!-- 数据源 -->
    <div class="layui-input-inline layui-form" style="width: 240px;margin-left: 2%">
        <select id="dataSource" name="dataSource" lay-filter="dataSource">
            <option value="" selected>默认数据源</option>
        </select>
    </div>
    <!-- -->
    <ul style="margin-top: 4%" id="auth-tree"></ul>
</div>


<!-- 数据表格 -->
<div style="float:left; margin-left: 3%;margin-top: 1.2%;width: 72%">
    <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
</div>


<!-- 确认分配按钮  -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <!--<button class="layui-btn layui-btn-sm" onclick="toolbarClick(3)">选择数据源</button>-->
        <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="dataSource()">数据源配置</button>
        <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="codePath()">查看生成路径</button>
        <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="toolbarClick(1)">生成预览代码</button>
        <button class="layui-btn layui-btn-warm layui-btn-sm" onclick="toolbarClick(2)">代码生成</button>
        <font size="2">当前数据源: </font> <font size="2" color="red" id="dataSourceName">默认数据源</font>
        <font size="2" style="margin-left: 1.5%">当前表: </font> <font size="2" color="red" id="tableName">t_basic</font>
        <font size="2" style="margin-left: 1.5%" color="#6a5acd" id="tableComment"></font>
    </div>
</script>


<script>
    let dataBaseTables = path + "/admin/dataBase/findTable";   // 查询数据库表-所有
    let findAll = path + "/admin/dataBase/findTableField";     // 根据表名称查询数据库字段数据
    let generatePreview = path + "/admin/generate/preview";    // 代码预览txt生成
    let generateCode = path + "/admin/generate/generateCode";  // 代码生成(会覆盖),谨慎操作
    let generatePath = path + "/admin/generate/getPath";       // 代码生成路径
    let datasourceList = path + "/admin/adminDatasource/findList";   // 数据源请求地址
    //
    let generateFilePath = "/page/modules_sys_gc_dataBase_filePath";    // 代码生成路径预览页面
    let pageDatasource = "/page/modules_sys_gc_datasource_datasource";  // 数据源管理页面路由

    let tableName = "t_basic";   // 左边菜单当前选中表名称 tableName
    let tableComment = "";       // 左边菜单当前选中表名称描叙
    let checkData = null;        // 当前数据表格所有复选框数据暂存
    let reqDataJson = null;      // 当前数据表格中的所有数据(最后请求参数)
    let dataSourceId = "";      // 当前数据源Id, 空串为当前server连接db

    let tree;
    let table;
    let form;
    let element;

    layui.config({
        base: '../components/treetable-lay/module/' //静态资源所在路径
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['table', 'treetable', 'element', 'tree', 'form'], function () {
        tree = layui.tree;
        table = layui.table;
        form = layui.form;
        element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        // 复选框默认是否选中字段名
        table = $.extend(table, {config: {checkName: 'isChecked'}});
        //
        showTree();                       // 初始化左边数据
        tableRender();                    // 初始化右边 table 数据
        xijiaEventCheck();                // 监听复选框选中
        xijiaEventSwitch();               // 监听开关选择操作
        xijiaEventDataSource();           // 监听数据源切换
    });

    /**
     * 监听复选框选中
     * @date  2019/11/16 0016 19:43
     * @return
     */
    function xijiaEventCheck() {
        table.on('checkbox(auth-table)', function (obj) {
            //获取所有选中，te = 数据表格Id
            checkData = table.checkStatus('te');
        });
    }

    /**
     *     监听开关选择操作
     * @date  2019/11/16 0016 19:43
     * @return
     */
    function xijiaEventSwitch() {
        // 是否为搜索条件字段
        form.on('switch(search)', function (obj) {
            let selectIfKey = obj.othis;                         // 获取当前控件
            let parentTr = selectIfKey.parents("tr");            // 获取当前所在行  layui-table-cell
            let parentTrIndex = parentTr.attr("data-index");     // 获取当前所在行的索引
            reqDataJson.data[parentTrIndex].search = obj.elem.checked;
            //layer.msg(JSON.stringify(dataJson.data[parentTrIndex]));
        });
    }


    /**
     *     左数据表列表
     *
     * @date  2019/11/16 0016 16:56
     * @return
     */
    function showTree() {
        // 获得数据库表数据
        let uri = dataBaseTables + "?dataSourceId=" + dataSourceId;
        let tablesJson = Ajax.get(uri);
        // 清除上一个
        $("#auth-tree").html("");
        //左边角色菜单数据
        tree({
            elem: '#auth-tree'
            , click: function (item) {
                // 监听选中
                if (item.id === 0) {
                    return;
                }
                // 当前选中表赋值
                tableName = item.name;
                tableComment = item.comment;
                // 重载数据
                tableRender();
                // 展示-必须在重载下方，先重载表格所有内容，在加载表名称数据
                $("#tableName").html(tableName);
                $("#tableComment").html(tableComment);
            }
            , nodes: [ //节点
                {
                    name: '数据表 (' + tablesJson.data.length + ')'
                    , id: 0
                    , spread: true
                    , children: tablesJson.data  // 表数据
                }
            ]
        });
        //生成一个模拟树
        let createTree = function (node, start) {
            node = node || function () {
                let arr = [];
                for (let i = 1; i < 10; i++) {
                    arr.push({
                        name: i.toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
                    });
                }
                return arr;
            }();
            start = start || 1;
            layui.each(node, function (index, item) {
                if (start < 10 && index < 9) {
                    let child = [
                        {
                            name: (1 + index + start).toString().replace(/(\d)/, '$1$1$1$1$1$1$1$1$1')
                        }
                    ];
                    node[index].children = child;
                    createTree(child, index + start + 1);
                }
            });
            return node;
        };
    }

    // 点中数据表选中状态颜色变化
    $("body").on("mousedown", ".layui-tree a", function () {
        if (!$(this).siblings('ul').length) {
            $(".layui-tree a cite").css('color', '#333');
            $(this).find('cite').css('color', '#009688');
        }
    });

    /**
     *  table数据--（抽离出来方便重载）
     *
     * @date  2019/11/16 0016 16:56
     * @param treetable
     * @param dataJson
     * @return
     */
    function tableRender() {
        let dataJson = Ajax.get(findAll + "?tableName=" + tableName + "&dataSourceId=" + dataSourceId);
        table.render({
            id: "te" //获取复选框所有选中数据使用
            , height: 800
            , elem: '#auth-table'
            //, url: findAll
            , data: dataJson.data    //直接加载数据
            , toolbar: '#toolbar'
            , title: '用户数据表'
            , cols: [
                [
                    {type: 'checkbox'}//, LAY_CHECKED: true
                    , {field: 'name', title: '字段名', width: 150}
                    , {field: 'type', title: '数据类型', width: 150}
                    , {field: 'typeDetail', title: '类型(长度)', width: 150}
                    , {field: 'defaultVal', title: '默认值', width: 150}
                    , {field: 'desc', title: '描叙', width: 225}
                    ,
                    {
                        field: 'isNull', title: '必填', width: 150, templet: function (res) {
                            return res.isNull == "NO" ? "是" : "";
                        }
                    },
                    {
                        field: 'search', title: '添加搜索(eq)', width: 180, templet: function (res) {
                            return '<input type="checkbox" name="search" lay-filter="search" lay-skin="switch" lay-text="是|否">';
                            //   + '&nbsp;&nbsp;|&nbsp;&nbsp;<input type="checkbox" name="search" lay-filter="searchSelect" lay-skin="switch" lay-text="是|否">';
                        }
                    },
                    // {
                    //     field: 'switch', title: 'switch-开关', templet: function (res) {
                    //         return '<input type="checkbox" name="switch" lay-filter="switch" lay-skin="switch" lay-text="是|否">';
                    //     }
                    // },
                ]
            ]
            , limit: dataJson.data.length
            , done: function (data) {
                checkData = table.checkStatus('te');
                reqDataJson = data;
            }
        })
    }


    /**
     *   点击代码生成 || 点击生成预览

     * @date  2019/11/20 16:05
     * @return
     */
    function toolbarClick(type) {
        // 数据表格中所有复选框选中的数据
        let newCheckData = checkData.data;
        // 手动操作变跟后数据表格中的所有数据
        let newDataJson = reqDataJson.data;
        // 判断是否在复选框中勾选
        for (let i = 0; i < newDataJson.length; i++) {
            newDataJson[i].checked = false;
            for (let j = 0; j < newCheckData.length; j++) {
                if (newDataJson[i].name === newCheckData[j].name) {
                    //被选中数据
                    newDataJson[i].checked = true;
                    break;
                    //alert(newDataJson[i].name+"-"+ newDataJson[i].search);
                }
            }
        }
        // alert(JSON.stringify(newData));
        let result = "";
        if (type === 1) {
            // 预览  --> 数据表格数据,表名称，项目名称,返回生成的文件地址
            result = Ajax.post(generatePreview, {
                data: JSON.stringify(newDataJson),
                tableName: tableName,
                tableComment: tableComment,
                dataSourceId: dataSourceId
                // path: path
            });
            // 预览
            this.tabTxt(result.data);
        } else {
            // 生成   -->  prompt层
            layer.alert();
            layer.msg('生成会覆盖原代码,确认要进行代码生成嘛?', {
                time: 0 //不自动关闭
                , btn: ['确认', '取消'] //按钮
                , yes: function (index) {
                    // 确认
                    // 数据表格数据,表名称，项目名称,返回生成的文件地址
                    result = Ajax.post(generateCode, {
                        data: JSON.stringify(newDataJson),
                        tableName: tableName,
                        tableComment: tableComment,
                        path: path
                    });
                    layer.close(index);
                    layer.msg("代码生成成功")
                }
            });
        }
    }

    /**
     *  生成的预览弹出层
     * @param data
     */
    function tabTxt(jsonData) {
        //let jsonData = JSON.parse(data);
        //tab层
        let html = "<div style='width: 100%;height: 100%;'><iframe src='/{file}' style='width: 100%;height: 730px;margin-top: 1%'></iframe></div>";
        layer.tab({
            // type: 2,
            scrollbar: false,
            shadeClose: true,
            area: ['100%', '100%'],
            tab: [{
                title: 'entity',
                content: [html.replace("{file}", jsonData.entity)]
            }, {
                title: 'DTO',
                content: [html.replace("{file}", jsonData.DTO)]
            }, {
                title: 'VO',
                content: [html.replace("{file}", jsonData.VO)]
            }, {
                title: 'controller',
                content: [html.replace("{file}", jsonData.controller)]
            }, {
                title: 'service',
                content: [html.replace("{file}", jsonData.service)]
            }, {
                title: 'serviceImpl',
                content: [html.replace("{file}", jsonData.serviceImpl)]
            }, {
                title: 'mapper',
                content: [html.replace("{file}", jsonData.mapper)]
            }, {
                title: 'mapperXml',
                content: [html.replace("{file}", jsonData.mapperXml)]
            }, {
                title: 'main',
                content: [html.replace("{file}", jsonData.main)]
            }, {
                title: 'mainAdd',
                content: [html.replace("{file}", jsonData.mainAdd)]
            }, {
                title: 'mainUpd',
                content: [html.replace("{file}", jsonData.mainUpd)]
            }
            ]
        });
    }

    /**
     * 代码生成路径查询（弹出层获取 findPathMap 展示）
     */
    var findPathMap = null;

    function codePath() {
        let result = Ajax.get(generatePath + "?tableName=" + tableName);
        findPathMap = result.data;
        Pop.tipsWindown(generateFilePath, "75%", "600px", "实际生成路径[root/] ==> 预览代码目录[File/code/]");
    }


    /**
     * 数据源配置
     **/
    function dataSource() {

        Pop.tipsWindown(pageDatasource, "90%", "90%", "数据源");

    }


    /**
     * 数据源选中事件
     */
    function xijiaEventDataSource() {
        form.on('select(dataSource)', function (data) {
            //得到被选中的值
            dataSourceId = data.value;
            $("#dataSourceName").html(data.elem[data.elem.selectedIndex].text);
            //重载左菜单
            showTree();
        });
        alert($(this).val());
    }

    /**
     *
     */
    $(function () {
        /**
         * 数据源列表
         * @type {null}
         */
        let dataSourceList = Ajax.get(datasourceList).data;
        let dataSourceHtml = "<option value='' selected>默认数据源</option>";
        for (let i = 0; i < dataSourceList.length; i++) {
            dataSourceHtml += "<option value='" + dataSourceList[i].id + "'>" + dataSourceList[i].dbTitle + " -> " + dataSourceList[i].dbName + "</option>";
        }
        $("#dataSource").html(dataSourceHtml);
    })
</script>
</body>
</html>
